<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>未知</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #video {
        width: 100%;
      }
      #app {
        display: flex;
        flex-wrap: wrap;
      }
      a {
        width: 2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 0.2rem;
        text-decoration: none;
        color: #000;
        font-size: 0.28rem;
      }
      a:hover {
        background: #f06000;
        color: #fff;
      }
      a.active {
        background: #f06000;
        color: #fff;
      }
      #video {
        background: #000;
      }
    </style>
  </head>
  <body>
    <video
      id="video"
      src=""
      controls
      preload="auto"
      playsinline="playsinline"
      webkit-playsinline="webkit-playsinline"
      x5-video-player-type="h5-page"
    ></video>
    <div id="app"></div>
    <script src="./config.js"></script>
    <script>
      const init = async () => {
        const searchArr = location.search.split('&')
        const path = searchArr[0].replace('?path=', '')
        const id = searchArr[1].replace('id=', '')
        const res = await http(`${host}/getDirData?videoDir=` + path)
        const video = res.videoDir

        const videoDom = document.getElementById('video')

        videoDom.src = video[id - 1]

        const videoName = decodeURIComponent(location.search)
          .split('/')
          .slice(-1)[0]
          .split('&')[0]

        const curTime = await http(
          `${host}/getPlayRecord?name=${videoName}&id=${id}`
        )

        videoDom.currentTime = curTime.time

        // function isVideoPlaying() {
        //   return !videoDom.paused && !videoDom.ended && videoDom.readyState > 2 // readyState > 2 表示数据已经足够当前播放
        // }

        // let clickTimer
        // videoDom.addEventListener('touchstart', function () {
        //   if (clickTimer) {
        //     clearTimeout(clickTimer)
        //     clickTimer = null
        //     if (document.fullscreenElement === videoDom) {
        //       videoDom.webkitExitFullscreen && videoDom.webkitExitFullscreen()
        //     } else {
        //       videoDom.webkitRequestFullscreen && videoDom.webkitRequestFullscreen()
        //     }
        //     return
        //   }
        //   clickTimer = setTimeout(() => {
        //     if (isVideoPlaying()) {
        //       this.pause()
        //     } else {
        //       this.play()
        //     }
        //     clickTimer = null
        //   }, 300)
        // })

        let timer = setInterval(async () => {
          http(
            `${host}/recordPlay?name=${videoName}&id=${id}&time=${videoDom.currentTime}`
          )
        }, 5000)

        videoDom.addEventListener('ended', () => {
          clearInterval(timer)
        })

        const htmlStr = video
          .map((item) => {
            let href = location.href.split('&id=')[0] + '&id='
            let idValue = Number(
              item.split('/').slice(-1)[0].replace('.mp4', '')
            )
            return `<a href="${href}${idValue}" ${
              id == idValue ? 'class="active"' : ''
            }>第${idValue}集</a>`
          })
          .join('')
        const app = document.getElementById('app')
        app.innerHTML = htmlStr

        const title = videoName + '-第' + id + '集'
        document.getElementsByTagName('title')[0].text = title
      }

      init()

      const initSize = () => {
        const clientWidth = document.body.clientWidth
        document.documentElement.style.fontSize =
          (clientWidth / 375) * 50 + 'px'
      }
      initSize()
      window.addEventListener('resize', initSize)
    </script>
  </body>
</html>
